<template>
  <div class="auction warp">
    <div class="lots_type">
      <div class="table">
        <div class="tr_border">
              <div class="td_type">
                  拍卖会形式
              </div>
              <div class="td_all stateAll">
                  <div class="td_all_val" @click="shapeAll">全部</div>
                  <ul class="all_item_ul">
                      <li v-for="(val,i) in aucShapeList" :key="i" @click="shapeListChild(val.id,i)">
                          <span :class='{stateFoucs:flagXS==i}'>{{val.val}}</span>
                      </li>
                  </ul>
              </div>
          </div>
          <div class="tr_border">
              <div class="td_type">
                  拍卖会阶段
              </div>
              <div class="td_all stateAll">
                  <div class="td_all_val" @click="stateAll">全部</div>
                  <ul class="all_item_ul">
                      <li v-for="(val,i) in lotsStateList" :key="i" @click="stateListChild(val.id,i)">
                          <span :class='{stateFoucs:flagJD==i}'>{{val.val}}</span>
                      </li>
                  </ul>
              </div>
          </div>
          <div class="tr4">
              <div class="td_type">
                  开拍时间
              </div>
              <div class="td_all stateAll">
                  <div class="td_all_val" @click="timeAll">全部</div>
                  <ul class="all_item_ul">
                      <li v-for="(val,i) in lotsTimeList" :key="i" @click="timeListChild(val.id,i)">
                          <span :class='{stateFoucs:flagSJ==i}'>{{val.val}}</span>
                      </li>
                  </ul>
                  <div>
                      <el-date-picker
                      size="mini"
                      v-model="starttime"
                      value-format="yyyy-MM-dd"
                      type="daterange"
                      @change="timeSE"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                      </el-date-picker>
                  </div>
                  <div class="lineNum"><span>盟拍网为你筛选到</span><span class="num_b">{{total}}</span><span>条相关结果</span></div>
              </div>
          </div>
      </div>
  </div>
  <el-empty v-if="emptyShow" :description=description :image-size='300'></el-empty> 
      <ul class="pai-item-list">
        <li v-for="item in aucData" :key="item.id" class="pai-item">
            <div class="link_wrap" @click="goAuctionDetail(item)">
              <el-card class="item_card" :body-style="{ padding: '0px' }">
                <div class="image">
                  <img :src="imgurls+item.image" alt=""/>
                </div>
                
                <div class="item_title">
                    {{item.name}}
                  </div>
                <div class="item_content">
                  <div class="item_money">
                    <p class="item_money_firm">拍卖企业：河北一盟拍卖有限公司</p>
                    <div class="item_money_time" v-if="item.status == '1'">
                      <p>预计{{item.start_time.ymdhms}}开始</p>
                      <p class="start greenBtn">即将开始</p>
                    </div>
                    <div class="item_money_time" v-else-if="item.status == '2'">
                      <p>{{item.start_time.ymdhms}}开始</p>
                      <p class="start redBtn">正在进行</p>
                    </div>
                    <div class="item_money_time" v-else>
                      <p>{{item.start_time.ymdhms}}结束</p>
                      <p class="start grayBtn">已结束</p>
                    </div>
                    
                  </div>  
                </div>
                <div class="item_bottom clearfix">
                    <p class="item_bottom_p">围观次数：{{item.viewcount}}</p>
                    <p class="item_bottom_p">标的数量：{{item.lotscount}}</p>
                    <div>
                      <p class="item_bottom_btn" @click="goAuctionDetail(item)">标的目录</p>
                    </div>
                </div>
              </el-card>
          </div>  
        </li>
    </ul>
    <div class="footer_page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="filterObj.page"
        :page-sizes="[10,20, 30, 40,50]" :page-size="filterObj.limit" layout="total, sizes, prev, pager, next"
        :total="total">
    </el-pagination>
    </div>
    
  </div>
</template>
<script>
import {auctionList,auctionDetails} from '@/api/interface'
import { getUserInfoID,timestampToTime} from '@/utils/auth'
export default {
  data() {
    return {
      uid:'',
      total: 1,
      stateFoucs:'stateFoucs',
      flagXS:null,
      flagJD:null,
      flagSJ:null,
      aucShapeList:[
        {id:1,val:'同步拍'},
        {id:2,val:'网络拍'},
      ],
      lotsStateList:[
        {id:1,val:'即将开始'},
        {id:2,val:'正在进行'},
        {id:3,val:'已结束'}
      ],
      lotsTimeList:[
        {id:1,val:'未来3天'},
        {id:2,val:'未来7天'},
        {id:3,val:'未来15天'}
      ],
      starttime:'',
      aucData:[],
      filterObj:{
        page:1,
        limit:10,
        mode:'',
        status:'',
        day:'',
        starttime:'',
        endtime:'',
      },
      description:'',
      emptyShow:false,
    }
  },
  created(){
    var userInfo = getUserInfoID();
      if(userInfo){
          var info = JSON.parse(userInfo);
          this.uid = info.id;
      }
    this.getAuctionList(Object.assign({uid:this.uid}, this.filterObj));
  },
  watch:{
      filterObj:{
          handler(val){
              // console.log('obj',val);
              let newObj = Object.assign({uid:this.uid}, val)
              this.getAuctionList(newObj);
          },
          deep: true
      }
  },
  methods: {
    getAuctionList(obj){
      auctionList(obj).then((res) => {
        if(res.data.length > 0){
          this.emptyShow = false;
          res.data.forEach(item => {
            item.start_time =timestampToTime(item.start_time);
          })
          this.aucData=res.data;
          this.total = res.count;
        }else{
          this.emptyShow = true;
          this.description = err.msg;
          this.aucData=[];
        }
        
      }).catch(err =>{
        this.emptyShow = true;
        this.description = err.msg;
        this.aucData=[];
      });
    },
    shapeAll(){
      this.flagXS=null;
      this.filterObj.mode='';
    },
    stateAll(){ //标的状态的全部
      this.flagJD=null;
      this.filterObj.status='';
    },
    timeAll(){
      this.flagSJ = null;
      this.filterObj.day='';
      this.filterObj.starttime = '';
      this.filterObj.endtime = '';
      this.starttime='';
    },
    shapeListChild(id,index){
      this.flagXS=index;
      this.filterObj.mode=id;
    },
    stateListChild(id,index){
      this.flagJD=index;
      this.filterObj.status=id;
    },
    timeListChild(id,index){
      this.flagSJ = index;
      this.filterObj.day=id;
    },
    timeSE(val){
      this.filterObj.starttime = val[0];
      this.filterObj.endtime = val[1];
    },
    //拍卖会详情
    goAuctionDetail(item){
      this.$router.push({path:'/auction/detail',query: {auctionId:item.id}});
    },
    // ---------分页
    handleSizeChange(val) {
      this.filterObj.limit = val;
    },
      //----- 分页---------
    handleCurrentChange(val) {
      this.filterObj.page = val;
    }
  }
}
</script>
<style lang="less" scoped>
@import '@/styles/index.less';
.auction{
  min-height: 100vh;
  .footer_page{
    margin: 26px 0;
      /deep/ .el-pagination{
          display: flex;
          justify-content: center;
      }
    }
  .lots_type{
    margin: 20px 0px;
    .table{
      position: relative;
      background: #fff;
      border: 1px solid #e6e6e6;
      border-radius: 6px;
      font-size: 12px;
      .tr_border{
          display: flex;
          border-bottom: 1px solid #e6e6e6;
          min-height: 46px;
      }
      .td_type{
          width: 90px;
          border-right: 1px solid #e6e6e6;
          text-align: center;
          padding-top: 14px;
      }
        .td_all{
          display: flex;
          align-items: center;
          color: #3d4246;
          padding: 10px;
          
          .lineNum{
            position: absolute;
            right: 10px;
            .num_b{
              padding: 0 5px;
              color: red;
            }
          }
          .td_all_val{
            text-align: center;
            cursor: pointer;
            padding: 4px 10px;
            margin: 0px 8px;
            border-radius: 14px;
            width: 24px;
            height: 16px;
            line-height: 16px;
            background-color: @base-color;
            color: #fff;
          }
          .ta_all_item{
            width: 982px;
          }
        }
        .tr4{
            display: flex;
        }

        
    }
    .all_item_ul{
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
    &:after{
        content: '';
        flex: auto;
    }
    li{
        span{
            display: inline-block;
            padding: 2px 10px;
            margin: 1px 6px;
            border-radius: 14px;
        }
        span:hover{
            background-color: @base-color;
            color: #fff;
        }
        .stateFoucs{
            background-color: @base-color !important;
            color: #fff;
        }
    }
}
    
}




  .pai-item-list{
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    height: 100%;
    &::after{
      content: '';
      width: 588px;
    }
    .pai-item{
      margin-bottom: 10px;
    }
    .link_wrap{
      width: 588px;
      height: 290px;
      background-color: #fff;
      position: relative;
      border-radius: 4px;
        .image {
          img{
            
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          display: block;
          height: 200px;
          border-radius: 4px;
        }
        .item_title{
          // width: 100%;
          width: 586px;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            font-weight: bold;
            position: absolute;
            top: 161px;
            color: #fff;
            background-color: rgba(18, 18, 18, 0.66);
          }
        .item_content{
          padding-left: 12px;
          padding-right: 12px;
          padding-top: 8px;           
          .item_money{
            
            .item_money_firm{
              font-size: 14px;
              color: rgb(153, 153, 153);
            }
            .item_money_time{
              p{
                display: inline-block;  
              }
              
              p:last-of-type{
                font-size: 12px;
                font-weight: 400;
                position: absolute;
                right: 0px;
                width: 70px;
                height: 22px;
                line-height: 22px;
                text-align: center;
                border-radius: 12px 0px 0px 12px;
                color: #fff;
              }
            }
          }
          .item_money{
            p{
              margin-bottom: 4px;
            }
          }
        }
        .item_bottom{
            font-size: 14px;
            color: rgb(153, 153, 153);
            border-top: 1px solid rgb(237, 237, 237);
            display: flex;
            justify-content: space-between;
            align-items: center;
            .item_bottom_p:first-of-type{
              margin-left: 10px;
            }
            .item_bottom_p{
              height: 30px; 
              line-height: 30px;
            }
            div{
              margin-right: 10px;
              display:table-cell;
              vertical-align:middle;
              .item_bottom_btn{
                height: 24px;
                line-height: 24px;
                color: #fff;
                background-color: @base-color;
                padding: 0px 10px;
                border-radius: 4px;
              }
            }
            
          }
      .item_card:hover{
          border: 1px solid @base-color;
        }
        .item_card{
          border-radius: 8px;
        }


      
      
    }
  }
  .stateAll{
        width: 982px;
    }
} 
</style>